<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<!--1 引入组件的样式文件 -->
		<link rel="stylesheet" href="css/counter.css" />
	</head>
	<body>
		<div id='app'>
		<my-button></my-button>
		<hr>
		<my-counter @update='update($event,0)' :value='value[0]' :min='0' :max='10' ></my-counter>
		默认值：1最小值：0 最大值：10
		<my-counter @update='update($event,1)' :value='value[1]' :min='-10' :max='10' ></my-counter>
		默认值：1最小值：-10 最大值：10
		<my-counter @update='update($event,2)' :value='value[2] '></my-counter>
		默认值：1没有最小值最小值
		
		<h1>总分	：{{value[0] + value[1] +value[2]}}</h1>
		</div>
		<!--2 引入功能模块 -->
		<script src="js/counter.js"></script>
		<script>
			//定义组件
			const Button=Vue.defineComponent({
				template:`
					<my-button></my-button>
				`
			})
			Vue.createApp({
				components:{//3 注册组件
					'my-button':Button,
					'my-counter':Counter
				},
				data(){
					return{
						value:[1,0,5]
					}
				},
				methods:{
					update(val,i){
						this.value[i]=val
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>